﻿@model RA_WebSite.Models.Provino

@{
    ViewBag.Title = "Dettagli";
}
<style>
    #container {				
        overflow: hidden;
    }
</style>


<h2 class="titoloSezione">Dettagli del provino cod.@Html.DisplayFor(model => model.Id)</h2>

<fieldset>
    <legend>Provino</legend>

    <h2 class="titolino">
        Immagine del provino:
    </h2>
    
    <div id="container">
        <img id="img" src="@Url.Action("getImg", "Step", new { id = ViewBag.stepSelezionato })">
    </div>
    
    @{
        string[] coordinate = Model.Coordinate.Split(' ');
    }

    <input type="hidden" id="x1" value="@coordinate[0]"/>
    <input type="hidden" id="y1" value="@coordinate[1]"/>
    <input type="hidden" id="x2" value="@coordinate[2]"/>
    <input type="hidden" id="y2" value="@coordinate[3]"/>


@*    <div class="display-field">
        
        @Html.DisplayFor(model => model.Coordinate)
    </div>*@
    
    <h2 class="titolino">
        Codice step associato al provino:
    </h2>

    <div class="display-field">
        @Html.DisplayFor(model => model.Step.Id)
    </div>
</fieldset>
<p>
    @Html.ActionLink("Indietro", "ListaProviniStep", new { id = ViewBag.stepSelezionato })
</p>




<script>
    var x1 = $('#x1').val();
    var y1 = $('#y1').val();
    var x2 = $('#x2').val();
    var y2 = $('#y2').val();
			
    $('#img').load(function(){
        $('#container').css({
            height: Math.abs(y2 - y1),
            width: Math.abs(x2 - x1)
        });
        	
        $('#img').css({
            marginLeft: -x1,
            marginTop: -y1
        });
    });
    
</script>
 



